<template>
    <h1 class="title"><span>鼠标悬浮看看效果</span></h1>
    <div class="title">
        <span>讲述了天才少年萧炎在创造了家族空前绝后的修炼纪录后突然成了废人，种种打击接踵而至。就在他即将绝望的时候，一缕灵魂从他手上的戒指里浮现，一扇全新的大门在面前开启，经过艰苦修炼最终成就辉煌的故事。</span>
    </div>
</template>

<script lang="ts" setup>

</script>

<style scoped lang="less">
.title{
    width: 20em;
    span{
        color: #333;
        background: linear-gradient(to right,blue,pink);
        // 没有移入 默认x 0% 2px相当于背景的高度
        background-size: 0% 2px;
        // 禁止平铺
        background-repeat: no-repeat;
        // y轴100% 最下边
        background-position-y: 100%;
        // 没有移入默认 右侧（过度离开的效果）
        background-position-x: right;
        transition: background-size 1s linear;
    }
}
.title:hover span{
    // 设置背景 开始位置 移入是让开始在左侧；过度从左向右
    background-position-x:left;
    // 背景的 size x y 移入是x设置100%；
    background-size: 100% 2px;
}
</style>